<template>
	<view class="container">
		<!-- 登录 -->
		<view class="toubu">
			<view>
				<image class="toubu-logo" src="/static/icon/logo.png" mode=""></image>
			</view>
			<view class="toubu-youbian">
				<!-- 钱包连接状态 -->
				<view v-if="!walletConnected" class="wallet-connect-btn" @click="connectWallet">
					<text>{{$t('wallet.connect')}}</text>
				</view>
				<view v-else class="wallet-info">
					<view class="wallet-address">
						<text>{{walletAddress}}</text>
					</view>

					<!-- 断开连接  跟上面的钱包地址，样式，你要改一下-->
					<view class="wallet-disconnect" @click="disconnectWallet">
						<text>{{$t('wallet.disconnect')}}</text>
					</view>
				</view>
				<view>
					<image class="youbian-logo" src="/static/icon/touxian.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 切换语言 -->
		<view class="qiehuanyuyan">

			<view class="yuyan">
				<text>{{$t('index.qiehuan')}}</text>
				<view @click="dakaiqiehaun">
					<image class="qiehuanimg" src="/static/icon/qiehaun.png" mode=""></image>
				</view>
			</view>
			<view class="shaoma" @click="goshaoma">
				<image src="/static/icon/shaoma.png" mode=""></image>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="qiehuantk">
				<view class="qiehuantk1" style="margin-top: 40rpx;" @click="changeLanguage('zh')">
					<text>简体中文</text>
				</view>
				<view class="qiehuantk1" @click="changeLanguage('en')">
					<text>English</text>
				</view>
			</view>
		</uni-popup>

		<!-- 轮播图 -->
		<view class="swiper">
			<swiper class="swiper-item" indicator-dots="true" :autoplay="true" :circular="true" :interval="3000"
				:duration="1000">
				<swiper-item class="swiper-item1" v-for="(item,index) in Dataswiper" :key="index">
					<view class="swiper-item1">
						<image :src="item.src" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 官方公告 -->
		<view class="gongao">
			<view class="gongao-title">
				<view class="gongao-title1">
					<image class="gongao-img" src="/static/icon/gonggao.png" mode=""></image>
					<text>{{$t('index.gonggao')}}:</text>
				</view>
				<view class="gongao-cont">
				<mz-marque direction="horizontal" :loop='true' :marqueList="Datagongao" field="NewsTitle" :speed="3" @itemClick="handleItemClick"></mz-marque>
				</view>
				<!-- <view class="gongao-title2" @click="godetail">
					<text class="gongao-title3">{{$t('index.chakan')}}</text>
					<text class="gongao-title4">></text>
				</view> -->
			</view>

		</view>
		<!-- 邀请码弹框 -->
		<uni-popup ref="popups" type="center">
			<view class="zulintk">
				<view class="guanbi">
					<image @click="close" class="guanbi1" src="/static/icon/guanbi.png" mode=""></image>
				</view>
				<view class="tktitle">
					<text>{{$t('shequng.yaoqingma')}}</text>
					<input class="uinput" type="text" v-model="yqm" :placeholder="this.$t('kuan.qingshuru')"/>
				</view>
				<view class="querenzulin" @click="Login()">
					<text>{{$t('zhuan.quren')}}</text>
				</view>
			</view>
		</uni-popup>

		<!-- 参与人数 -->
		<!-- <view class="cangyurenshu">
			<view class="cangyurenshu1">
				<view class="cangyurenshu1-title">
					<image class="renimg" src="/static/icon/renshu.png" mode=""></image>
					<text>{{$t('index.renshu')}}</text>
				</view>
				<text class="shuzhi">1454857</text>
			</view>
			<view class="cangyurenshu2">
				<view class="cangyurenshu1-title">
					<image class="renimg" src="/static/icon/jiaoyi.png" mode=""></image>
					<text>{{$t('index.jiaoyi')}}</text>
				</view>
				<text class="shuzhi">$314577.00</text>
			</view>
		</view>
		<view class="tupian">
			<image src="/static/icon/tupian.png" mode=""></image>
		</view> -->

		<!-- 表 -->
		<view class="biaoge">
			<view class="biaoge1">
				<view class="list-img1">
					<text>X</text>
				</view>
				<text>XGT</text>
			</view>
			<view class="biaoge2">
				<text>${{totalMoney}}</text>
				<text style="font-size: 16px;margin-top: 10rpx;">{{today}}</text>
			</view>
			<view class="jiage">
				<view class="jiage1">
					<text>${{totalMoney}}</text>
				</view>
			</view>
			<!-- <view class="charts-box">
				<qiun-data-charts type="area" :opts="opts" :ontouch="true" :chartData="chartData" />
			</view> -->
		</view>
		<!-- 邀请码弹窗组件 -->
		<InviteCodeModal
			:visible="inviteModalVisible"
			:title="inviteModalConfig && inviteModalConfig.title || ''"
			:placeholder="inviteModalConfig && inviteModalConfig.placeholder || ''"
			:cancelText="inviteModalConfig && inviteModalConfig.cancelText || ''"
			:confirmText="inviteModalConfig && inviteModalConfig.confirmText || ''"
			@confirm="handleInviteModalConfirm"
			@cancel="handleInviteModalCancel"
		/>

	</view>
</template>

<script>
	import {
		Debounce
	} from "@/api/debounce.js"; //防抖
	import walletMixin from "@/mixins/walletMixin.js"; // 钱包混入
	import InviteCodeModal from "@/components/InviteCodeModal.vue"; // 邀请码弹窗组件

	export default {
		components: {
			InviteCodeModal
		},
		mixins: [walletMixin],
		data() {
			return {
				locale: 'zh',
				yqm:'',//邀请码
				// 其他数据
				Dataswiper: [{
					src: "/static/img/lunbo1.png"
				}, {
					src: "/static/img/lunbo2.png"
				}, {
					src: "/static/img/lunbo3.png"
				}],
				today:"",
				// 公告
				Datagongao:[],
				totalMoney:0,//总额
				chartData: {},
				opts: {
					color: ["#73C0DE"],
					padding: [],
					enableScroll: true,
					legend: {},
					xAxis: {
						disabled: false,
						disableGrid: true,
						scrollShow: true,//允许滑动
						itemCount: 8,//屏幕显示个数
						fontSize:11//字体大小
					},
					yAxis: {
						disabled: true,
						gridType: "solid",
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				}
			}
		},
		onReady() {
			this.getServerData();
		},
		// onShow() {
		// // 监听loginFailed事件，当登录失败时打开弹框
		// uni.$on('loginFailed', (errorMessage) => {
		// 	console.log('yqm错误',errorMessage);
		//   // 弹出邀请码弹框
		//    this.$nextTick(() => {
		//           if (this.$refs.popups && typeof this.$refs.popups.open === 'function') {
		//             this.$refs.popups.open('center');
		//           } else {
		//             console.error('popups组件未找到或没有open方法');
		//           }
		//         });
		// });	
		// },
		//   beforeDestroy() {
		//     // 组件销毁时移除事件监听
		//     uni.$off('loginFailed');
		// 	this.$refs.popups.close()
		//   },
		onLoad() {
			// 获取用户进入当前页面时所带的参数
			const launchOptions = uni.getLaunchOptionsSync()
			// console.log('launchOptions', launchOptions)
			// 获取用户通过参数进入页面时所带的参数
			const query = launchOptions.query||{}
			// console.log('query', query)
			// 获取 yqm 参数值
			const yqm = query.yqm
			this.yqm = yqm
			const locale = uni.getLocale();
			this.$i18n.locale = locale;
			this.locale = locale;
			// console.log('当前的语言为', this.locale);

			// 获取公告
			this.Announcement()
			this.getuserinfo()
		},
		methods: {
			// 重写获取当前邀请码方法
			getCurrentInviteCode() {
				return this.yqm || uni.getStorageSync('yqm') || '';
			},

			// 公告详情
			handleItemClick(data) {
				let id=data.item.Id
				 // console.log('Received clicked item data:', id);
				this.$tab.navigateTo('/pages/index/detail?id='+id)
			   
			},
			// 关闭邀请码弹框
			close(){
				this.$refs.popups.close()
			},
			// 登录（保留原有方法，但不再直接调用）
			Login() {
				let address=uni.getStorageSync('address')
				let data = {
					dizhi: address,
					yqm: this.yqm
				}
				let opts = {
					url: '/user/Userlogin',
					method: 'POST'
				};
				// console.log('打印入参',data);
				this.api.httpRequest(opts, data).then(res => {
					// console.log('登录', res);
					if (res[1].data.state == 'success') {
						uni.setStorageSync("token", JSON.stringify(res[1].data.token));
						this.$refs.popups.close()
					}else{
						
					}

				})
			},
			// 扫码
			goshaoma() {
				this.$tab.navigateTo('/pages/index/shaoma')
			},
			// 打开弹框
			dakaiqiehaun() {
				this.$refs.popup.open('center')
			},
			// 切换语言
			changeLanguage(lang) {
				this.$i18n.locale = lang;
				this.locale = lang
				uni.setLocale(lang)
				this.setTitle()

				this.$refs.popup.close()
			},
			setTitle(){
				uni.setTabBarItem({// 修改底部导航
					index: 0,
					text: this.$t('shouye')
				});
				uni.setTabBarItem({// 修改底部导航
					index: 1,
					text: this.$t('chanpin')
				});
				uni.setTabBarItem({// 修改底部导航
					index: 2,
					text: this.$t('zhuanzhang')
				});
				uni.setTabBarItem({// 修改底部导航
					index: 3,
					text: this.$t('mys')
				});
			},
			
			// 获取公告
			Announcement(){
				let data = {};
				let opts = {
					url: '/news/GetNewsList',
					method: 'GET'
				};
				
				this.api.httpTokenRequest(opts, data).then(res => {
					// console.log('res', res);
					if(res[1].data.state=="success"){
						this.Datagongao=res[1].data.list
					}else{
						this.$modal.msg(res[1].data.msg)
					}
					
				});
			},
			getuserinfo(){
				let data = {}
				let opts = {
					url: '/user/GetUserInfo',
					method: 'GET'
				};
				this.api.httpTokenRequest(opts, data).then(res => {
					// console.log('个人资料', res);
					if (res[1].data.state == 'success') {
						uni.setStorageSync('userinfo', res[1].data.list[0])
						
					}
				
				})
			},
			// 获取折线图
			getServerData() {
				let data = {};
				let opts = {
					url: '/Xgt/GetXGTmoney',
					method: 'GET'
				};

				this.api.httpTokenRequest(opts, data).then(res => {
					
					
					// console.log('res', res);
					// 今日最新价格
					this.totalMoney = res[1].data.list[0].money
					// 年月
					this.today=res[1].data.list[0].datetime.slice(0,11)
					uni.setStorageSync('newmoney', this.totalMoney)
					// 倒序
					res[1].data.list.reverse();
					// 提取datetime
					var categories = res[1].data.list.map(item => {
					    // 提取日期部分
					    const datePart = item.datetime.split(' ')[0]; // 获取 "YYYY-MM-DD" 格式的日期
					    // 从日期部分获取“月”和“日”部分
					    const [year, month, day] = datePart.split('-'); // 使用解构赋值获取年月日
					    return `${month}-${day}`; // 返回 "MM-DD" 格式
					});
					let series = [
						{ name: "", data: [] }
					];
					// 循环 res[1].data.list 中的每个 item
					res[1].data.list.forEach((item) => {
					  series[0].data.push(item.money);
					});
					// 将 categories 和 series 放入一个对象中
					let result = {
					  categories: categories,
					  series: series
					};
					
					// console.log(result);
					this.chartData = JSON.parse(JSON.stringify(result));
					// console.log('this.chartData', this.chartData);
				});
			},


		}
	}
</script>

<style>
	
	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* 头部登录 */
	.toubu {
		width: 94%;
		padding: 20rpx;
		margin-top: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.toubu-logo {
		width: 180rpx;
		height: 60rpx;
	}

	.toubu-youbian {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.youbian-shu {
		width: 220rpx;
		height: 50rpx;
		border-radius: 30rpx;
		background-color: #5e5e5e;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #ffffff;
		margin-right: 15rpx;
	}

	.youbian-logo {
		width: 60rpx;
		height: 60rpx;
		overflow: hidden;
		border-radius: 50%;
	}

	/* 钱包连接按钮 */
	.wallet-connect-btn {
		padding: 0rpx 25rpx 0rpx 25rpx;
		height: 50rpx;
		border-radius: 25rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #ffffff;
		margin-right: 15rpx;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.wallet-connect-btn:active {
		transform: scale(0.95);
		opacity: 0.8;
	}

	/* 钱包信息 */
	.wallet-info {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-right: 15rpx;
	}

	.wallet-address {
		padding: 0rpx 25rpx 0rpx 25rpx;
		border-radius: 30rpx;
		border-radius: 25rpx;
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		color: #ffffff;
		margin-bottom: 8rpx;
		font-weight: 500;
	}



	.wallet-disconnect {
		padding: 0rpx 25rpx 0rpx 25rpx;
		border-radius: 30rpx;
		background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18rpx;
		color: #ffffff;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.wallet-disconnect:active {
		transform: scale(0.95);
		opacity: 0.8;
	}

	/* 切换语言 */
	.qiehuanyuyan {
		width: 90%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15rpx;
		font-size: 24rpx;
	}

	.yuyan {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.shaoma {
		width: 45rpx;
		height: 45rpx;
	}

	.qiehuanimg {
		width: 45rpx;
		height: 45rpx;
		margin-left: 15rpx;
	}

	/* 轮播图 */
	.swiper {
		width: 96%;
		height: 360rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.swiper-item1 {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	/* 公告 */
	.gongao {
		width: 90%;
		padding: 20rpx;
		border: 1rpx solid #6f86fc;
		border-radius: 10rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		background: #2342f9;
		background: -webkit-linear-gradient(to right, #7180af, #0c1759);
		background: linear-gradient(to right, #7180af, #0c1759);
	}

	.gongao-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.gongao-title1 {
		font-size: 28rpx;
		font-weight: 700;
		color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.gongao-img {
		width: 38rpx;
		height: 38rpx;
		margin-right: 10rpx;
	}

	.gongao-title2 {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #6f86fc;
	}

	.gongao-title3 {
		margin-right: 15rpx;
		font-size: 28rpx;
		font-weight: 700;
	}

	.gongao-title4 {
		font-size: 30rpx;
		font-weight: 700;
	}

	.gongao-cont {
		width: 80%;
		font-size: 28rpx;
		
	}

	
	/* 交易 */
	.cangyurenshu {
		width: 94%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		margin-top: 30rpx;
	}

	.cangyurenshu1 {
		width: 50%;
		display: flex;
		flex-direction: column;

	}

	.cangyurenshu2 {
		width: 40%;
		display: flex;
		flex-direction: column;
	}

	.cangyurenshu1-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-weight: 500;
		font-size: 28rpx;
	}

	.renimg {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}

	.shuzhi {
		font-size: 40rpx;
		font-weight: 700;
		word-wrap: break-word;
		/* 允许单词超出时换行 */
		white-space: normal;
		/* 默认允许换行 */
		margin-top: 15rpx;
	}

	.tupian {
		width: 400rpx;
		height: 400rpx;
		margin-top: 60rpx;
		margin-bottom: 60rpx;
	}
	/* 邀请码弹框 */
	.zulintk{
		width: 600rpx;
		height: 350rpx;
		padding: 20rpx;
		background-color: #343434;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.guanbi{
		width: 100%;
		display: flex;
		justify-content: end;
	}
	.guanbi1{
		width: 45rpx;
		height: 45rpx;
	}
	.tktitle{
		width: 80%;
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
	}
	.uinput{
		width: 460rpx;
		height: 60rpx;
		padding: 15rpx;
		border-radius: 20rpx;
		border: 1rpx solid #989898;
		margin-top: 20rpx;
	}
	.querenzulin{
		width: 490rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #5f74ed;
		border-radius: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}

	/* 弹框 */
	.qiehuantk {
		width: 600rpx;
		height: 280rpx;
		background-color: #ffffff;
		display: flex;
		color: #000;
		flex-direction: column;
		border-radius: 20rpx;
	}

	.qiehuantk1 {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.qiehuantk1:active {
		background-color: #ececec;
	}

	.biaoge {
		width: 90%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 25rpx;
	}

	.biaoge1 {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 38rpx;
		font-weight: 700;
	}

	.list-img1 {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15rpx;
		font-size: 50rpx;
		font-weight: 700;
		border-radius: 50%;
		border: 8rpx solid #a5abfc;
		border-radius: 50%;
		background: #a5abfc;
		box-shadow: inset 5px 5px 10px #5e6190,
			inset -5px -5px 10px #ecf5ff;
	}

	.biaoge2 {
		width: 100%;
		display: flex;
		flex-direction: column;
		font-size: 36rpx;
		font-weight: 700;
		margin-top: 20rpx;
	}
	.jiage{
		width: 700rpx;
		height: 400rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		background-size: 100% 100%;
		background-image: url('/static/img/jiagebeijing.png');
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	@font-face {
		font-family: 'CustomFont';
		src: url('/static/fonts/SanJiLiLiangTiJian-Cu-2.ttf');
	}
	.jiage1{
		font-size: 42px;
		font-weight: bold;
		font-family: 'CustomFont';
		text-shadow: 4px 4px 8px #000;
	}

	.charts-box {
		width: 100%;
		margin-bottom: 100rpx;
	}
</style>